<template>
	<view class="container" :style="{top: inputBottom+'px'}">
		<commonNavbar :info="userInfo.baseInfo" :id="userInfo.baseInfo.userId"/>
			
		<view class="mainPage" :style="{height: screenHeight+'px', position: 'relative', top: navTop+'px'}">
			<view class="cover">
				<!--放一个轮播图插件-->
					<swiper class="swiper" circular indicator-dots autoplay interval=5000>
						<swiper-item style="overflow: auto;" class="swiperItem" v-for="(item, index) in userInfo.coverPics" :key="index" @click="seeImg(item)">
							<image class="coverPic" :src="item.cover" mode="aspectFit"></image>
						</swiper-item>
					</swiper>

			</view>
			
			<view class="contentArea">
				<view class="tags">
					<unitag v-for="(item, index) in userInfo.baseInfo.tags" :inverted="true" :text="item" type="primary" size="mini" />
					
				<!--
					<u-tag class="thoughtTags" v-for="(item, index) in userInfo.baseInfo.tags" :key="index" :text="item" type="warning" size="mini" plain plainFill></u-tag>
				-->
				
				</view>
				
				<view class="content">
					{{content}}
				</view>
				
			</view>
			
			<commentsList class="commentsArea" :commentsList="userInfo.commentsList"></commentsList>
		</view>
		
		 <view class="bottomArea" :style="{bottom:inputBottom + 'px'}" style="transition: all 0.2s ease-in;">
		 	<view class="inputArea" :style="{width: inputWidth + '%'}">
		 		<input class="input" v-model="commentToActicle" @focus="focusFunc" @blur="blurFunc"  
									 placeholder="请输入评论" clearable type="text" autoHeight confirm-type="send" 
									 :adjust-position="false"
									 style="font-size: 0.8rem;border: 1px solid darkgrey; height: 70upx; width: 100%;border-radius: 15px;padding-right: 10upx; padding-left: 10upx;"
									 />
				<view class="send" @click="send()">发送</view>
		 	</view>
			
			<view class="interaction" v-show="interactionShow" style="transition: all 0.2s ease-in;">
				<div id="reSetIcon" class="t-icon t-icon-pinglun" @click="seeComments()">
					<div>{{commentCount}}</div>
				</div>
				<div id="reSetIcon" class="t-icon t-icon-favorites" @click="isCollect = !isCollect">
					<div>{{collections}}</div>
				</div>
				<div id="reSetIcon" class="t-icon" :class="[isLikeThisArticle==false?'t-icon-dianzan':'t-icon-dianzan-copy']" @click="likeThisArticle">
					<div>{{likesCount}}</div>
				</div>
			</view>
		 </view>
	</view>
</template>

<script>
	import commonNavbar from '../commonNavbar.vue'
	import unitag from '../../uni-ui/uni-tag.vue'
	import uniInput from 'uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
	export default{
		components:{commonNavbar,unitag,uniInput},
		data(){
			return{
				inputBottom:0,
				inputWidth:55,
				isLoaded: false,
				thoughtId:undefined, //文章Id
				interactionShow: true,
				isLikeThisArticle:false,
				swiperLoaded: false,
				commonNavbarLoaded:false,
				screenHight: 0,
				navTop:0,
				likesCount: 10,
				commentCount: 20,
				collections: 10,
				isCollect: false,
				commentToActicle: "",
				content: "",
				userInfo:{
					baseInfo:{
						userAvatar: "",
						userNickName: "",
						tags:[], 
						isVip: false,
						userId: undefined,
						//请注意，content应当也是html格式
					},
					coverPics:[
						// {
						// 	id: 0,
						// 	cover: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15"
						// },
						// {
						// 	id: 1,
						// 	cover: "https://i1.hdslb.com/bfs/archive/a458ecf36ce5ad1b0f696d19ef93ac7a713660c1.jpg"
						// },
						// {
						// 	id: 2,
						// 	cover: "https://img2.baidu.com/it/u=3687842729,3134101122&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=888"
						// },
						// {
						// 	id: 3,
						// 	cover: "https://img0.baidu.com/it/u=2249925780,1280417922&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500"
						// }
					],
					commentsList:[
						// {
						// 	id: 0,
						// 	userIsVip:true,
						// 	isLike: false,
						// 	headPic: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						// 	nickName: "恐龙卧底", //待优化方向：昵称可以加入简单的图标？
						// 	userTag: "前端开发者",
						// 	content: "+3\nghsioghjsioarhgoanfiuhsofheGBNJDSHGFKLNGAHGNJDAHG;O",
						// 	time: "", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
						// 	likes: 6, //点赞数量
						// 	// 待加入功能： 层中层
						// 	childrenCommentsNum: 0,
						// 	childrenComments:[
						// 		{
						// 			id: 4,
						// 			userIsVip:false,
						// 			isLike: false,
						// 			headPic: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						// 			nickName: "油专丁真", //待优化方向：昵称可以加入简单的图标？
						// 			userTag: "打油部长",
						// 			content: "扶戈威武士",
						// 			time: "2013-11-11", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
						// 			likes: 6, //点赞数量
						// 			// 待加入功能： 层中层
						// 			kidsCommentsNum: 0,
						// 			kidsComments:[
										
						// 			]
						// 		},
						// 		{
						// 			id: 5,
						// 			userIsVip:false,
						// 			isLike: false,
						// 			headPic: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						// 			nickName: "油专丁真", //待优化方向：昵称可以加入简单的图标？
						// 			userTag: "打油部长",
						// 			content: "扶戈威武士",
						// 			time: "2022-11-11", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
						// 			likes: 6, //点赞数量
						// 			// 待加入功能： 层中层
						// 			kidsCommentsNum: 0,
						// 			kidsComments:[
										
						// 			]
						// 		},
						// 	]
						// },
						// {
						// 	id: 1,
						// 	userIsVip:false,
						// 	isLike: false,
						// 	headPic: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						// 	nickName: "油专丁真", //待优化方向：昵称可以加入简单的图标？
						// 	userTag: "打油部长",
						// 	content: "扶戈威武士",
						// 	time: "", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
						// 	likes: 6, //点赞数量
						// 	// 待加入功能： 层中层
						// 	childrenCommentsNum: 0,
						// 	childrenComments:[
						// 		{
						// 		}
						// 	]
						// },
						// {
						// 	id: 2,
						// 	userIsVip:true,
						// 	isLike: false,
						// 	headPic: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						// 	nickName: "Rory", //待优化方向：昵称可以加入简单的图标？
						// 	userTag: "油院丁真",
						// 	content: "超长文本溢出测试: fsnefuhncjoasgfiBNEFOwuehfuioewhfbojNDFJSDn kcjbWIURFHOWIUehrfuohWOFNDLSJ个HFOHJOFHLKMLKHOSJDKMKGHSJISJDSGDJGLNM,SBKLFHnbfjiashefnlfkfoawefkahjfioqahfhbafhG;heoiht'WPIHFGNBJdsfnjdb;fhdbsuHF'Pwejjfknskjmbfgjiasghuoahgnk",
						// 	time: "", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
						// 	likes: 2, //点赞数量
						// 	// 待加入功能： 层中层
						// 	childrenCommentsNum: 0,
						// 	childrenComments:[
						// 		{
						// 		}
						// 	]
						// },
					]
				}
			}
		},
		methods:{
			init(){
				uni.getSystemInfo({
					success: (res) => {
						this.screenHeight = res.screenHeight*0.915-68;
						this.navTop = res.screenHeight*0.090;
					}
				})
			},
			seeImg(item){
				uni.previewImage({
					urls:[item.cover]
				})
			},
			/*
			getCommentToThisActicle(e){
				this.commentToActicle = e.detail.value;
			},*/
			
			send(){ //发送对文章评论
				this.inputBottom = 0
				if(this.commentToActicle){
					uni.request({
						method:'POST',
						url:"http://192.168.31.146:8090/",
						header: this.$store.state.loginUser.token,
						data:{
							
						}
					}).then(res => {
						this.userInfo.commentsList.push({
							articleId: this.userInfo.commentsList.length,
							userIsVip: this.$store.state.loginUser.userBaseInfo.isVip,
							isLike: false,
							headPic: require(`${this.$store.state.loginUser.userBaseInfo.avatar}`),
							nickName: this.$store.state.loginUser.userBaseInfo.nickName, //待优化方向：昵称可以加入简单的图标？
							userTag: this.$store.state.loginUser.userBaseInfo.tagList,
							content: this.commentToArticle,
							time: "", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
							likes: 0, //点赞数量
							// 待加入功能： 层中层
							childrenCommentsNum: 0,
							childrenComments:[
								{
									
								}
							],
						});
					})
					this.commentToActicle = ''
				}
			},
			likeThisArticle(){
				this.isLikeThisArticle = !this.isLikeThisArticle;
				if(this.isLikeThisArticle){
					uni.request({
						method:"POST",
						url: "",
						header:this.$store.state.loginUser.token,
						data:{
							id:0, //文章id
						}
					}).then(res => {
						this.$store.state.loginUser.likeList.push(this.articleId);
						this.likesCount++
					})
				}else{
					uni.request({
						method:"POST",
						url: "",
						header:this.$store.state.loginUser.token,
						data:{
							id:this.articleId, //文章id
						}
					}).then(res => {
						this.$store.state.loginUser.likeList.splice(this.$store.state.loginUser.likeList.indexOf(),1);
						this.likesCount--
					})
				}
			},
			
			focusFunc(e){
				this.interactionShow = false
				this.inputWidth = 90
				this.inputBottom = e.detail.height
				//console.log(e)
				/*
				uni.onKeyboardHeightChange(res => {
					//console.log(res.height);
					that.inputBottom = res.height
				})*/
			},
			
			blurFunc(e){	
				this.interactionShow = true
				this.inputWidth = 55
				
				//this.inputBottom = 0;
				
				/*
				uni.onKeyboardHeightChange(res => {
					//console.log(res.height)
					that.inputBottom = 0;
				})*/
			}
		},
		mounted() {
			this.init(),
			this.swiperLoaded = true,
			this.isLoaded = true
		},
		onLoad(options){
			this.articleId = options.id;
			uni.request({
				url:'http://162.14.102.246:8090/article/front/post/'+this.thoughtId,
				method:'GET',
				header:{
					xdzn_token: this.$store.state.loginUser
				}
			}).then(res => {
				console.log(res)
				//等待施工
			})
		}
	}
</script>

<style scoped>
	.commonNavbar{
		position: relative;
	}
	.mainPage{
		width: 96%;
		margin: 0 auto;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		overflow-y: scroll;
		position: relative;
	}
	.cover, .contentArea, .commentsArea{
		margin: 0 auto;
	}
	.cover::after, .contentArea::after{
		content: "";
		display: flex;
		position: relative;
		top: 10rpx;
		height: 1rpx;
		background-color: rgba(216, 216, 216, 0.618);
	}
	.cover::after{
		width: 80%;
		transform: translate(10%);
	}
	.contentArea::after{
		top: 15rpx;
		width: 80%;
		transform: translate(10%);
	}
	.cover{
		position: relative;
		top: 0%;
		width: 690rpx;
		height: 920rpx;
		background-color: aqua;
		background-color: rgba(252, 252, 252, 0.618);
		margin-bottom: 20rpx;
	}
	.contentArea{
		position: relative;
		display: flex;
		flex-direction: column;
		top: ;
		width: 91%;
		padding: 20rpx;
		padding-bottom: 0px !important;
		margin-bottom: 30rpx;
	} 
	.content{
		position: relative;
		top: 0.5%;
		width: 100%;
		word-wrap: normal;
	}
	.tags{
		position: relative;
		top: -10rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.commentsArea{
		position: relative;
		top: 10rpx;
		flex-direction: column;
		width: 93%;
		min-height: 500rpx;
		padding: 10rpx;
	}
	.swiper{
		width: 100%;
		height:920rpx;
		position: relative;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.swiperItem{
		align-items: center;
		justify-content: center;
		display: flex;
	}
	.coverPic{
		height: 100%;
	}
	::v-deep .thoughtTags{
		display: inline-block;
		border-radius: 2rpx;
		margin-right: 4rpx;
	}
	.bottomArea{
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 120rpx;
		background-color: ghostwhite;          
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 2rpx solid rgba(234, 234, 234, 1.0);
	}
	.inputArea{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.input{
		width: 100%;
		margin-left: 26rpx;
	}
	.interaction{
		height: 70%;
		width: 35%;
		margin-right: 40rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	#reSetIcon{
		width: 1.6rem;
		height: 1.6rem;
	}
	#reSetIcon>div{
		position: relative;
		left: 50rpx;
	}
	
	.send{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		letter-spacing: 6rpx;
		left: 2%;
		padding: 6rpx;
		width: 25%;
		height: 56rpx;
		border-radius: 8px;
		color: white;
		font-size: 0.8rem;
		background-color: deepskyblue;
	}
</style>